<script setup lang="ts">
import { reactive, ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])
const deleteBook = (id: number) => {
  list.value = list.value.filter(item => item.id !== id)
}
const bookInfo=reactive({
  id:0,
  name:'',
  author:''
})
const addBook=()=>{
  bookInfo.id=Date.now()
  // list.value.push({...bookInfo})
 // 合并对象 浅拷贝 将bookInfo对象的浅拷贝添加到list数组中
list.value.push(Object.assign({}, bookInfo))
  
}

</script>


<template>
  <div id="app">
    <h3>黑马书架</h3>
    <div>
      <input type="text" placeholder="书名" v-model="bookInfo.name"></input>
      <input type="text" placeholder="作者" v-model="bookInfo.author"></input>
      <button @click="addBook()">添加</button>
      <p>{{ bookInfo.id }}</p>
    </div>
    <ol>
      <li v-for="item in list" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="deleteBook(item.id)">删除</button>
      </li>
    </ol>
  </div>
</template>

